<template>
    <div class="teamplate-kaoqin">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="">开始日期：</label>
                        <input type="text" class="form-control start-date" id="j_startDate">
                    </div>
                    <div class="form-group">
                        <label class="">结束日期：</label>
                        <input type="text" class="form-control end-date" id="j_endDate">
                    </div>
                    <div class="form-group">
                        <label class="">考勤人：</label>
                        <select class="form-control" id="j_attendanceInquiry" style="width:100px;">
                            <option data-idcard=""></option>
                            <option v-for="(item,index) in attendance"  :data-idcard="item.idcard">{{item.dzyname}}</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default" @click="onInquiry">查询</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="b-operation">
                        <div class="form-inline">
                             <div class="form-group">
                                <label class="">考勤人：</label>
                                <select class="form-control" @change="onSearchAttendance($event)">
                                    <option></option>
                                    <option v-for="(item,index) in attendance" :data-zyzc="item.zyzc" :data-idcard="item.idcard" >{{item.dzyname}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="">职称：</label>
                                <input type="text" class="form-control" readonly="readonly" v-model="zyzc">
                            </div>
                            <div class="form-group">
                                <label class="">身份证：</label>
                                <input type="text" class="form-control" v-model="idcard" readonly="readonly" style="width:150px">
                            </div>
                            <div class="form-group">
                                <label class="">考勤类型：</label>
                                <label class="radio-inline">
                                    <input type="radio" name="r1" value="到岗" v-model="radio"> 到岗
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="r1" value="离岗" v-model="radio"> 离岗
                                </label>
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-default" @click='onAdd'>保存</button>
                            </div>
                        </div>
                    </div>
                    <div class="table-wrap">
                        <div class="table-box">
                            <table class="table table-striped tc">
                                <tbody >
                                    <tr>
                                        <th>药师姓名</th>
                                        <th>药师职称</th>
                                        <th>身份证号</th>
                                        <th>考勤时间</th>
                                        <th>考勤类型</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="(item,index) in mainBody">
                                        <td>{{item.person_name}}</td>
                                        <td>{{item.person_titles}}</td>
                                        <td>{{item.person_id_number}}</td>
                                        <td contenteditable=true><input :id="'date'+index" type="text" class="table-input" :value="item.check_time | date"></td>
                                        <td>{{item.check_type}}</td>
                                        <td><input type="button" class="btn btn-default child-btn mr10" value="保存" :data-index='index' :data-pcid="item.pc_id" @click="onRevise"><input type="button" class="btn btn-default child-btn" @click="onDel" :data-pcid="item.pc_id" value="删除"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
    import bus from "../api/eventBus";
    import {
        setUi,
        setpopPerfect
    } from "../vuex/actions";
    import {
        ui,
        popPerfect
    } from "../vuex/getters";
    export default {
        components: {},
        data() {
            return {
                // times: '',
                attendance: {}, //考勤药师
                dzyname: "", //药师名称
                zyzc: "", //药师职称
                idcard: "", //药师身份证
                radio: "", //药师身份证到岗状态
                mainBody: "", //考勤药师记录列表
                storeId: "" //门店信息
            };
        },
        watch: {},
        vuex: {
            getters: {
                ui,
                popPerfect
            },
            actions: {
                setUi,
                setpopPerfect
            }
        },
        filters: {
            date: function(info) {
                function timetrans(date) {
                    var date = new Date(date); //如果date不为10位需要乘1000
                    var Y = date.getFullYear() + "-";
                    var M =
                        (date.getMonth() + 1 < 10 ?
                            "0" + (date.getMonth() + 1) :
                            date.getMonth() + 1) + "-";
                    var D =
                        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
                    var h =
                        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
                        ":";
                    var m =
                        (date.getMinutes() < 10 ?
                            "0" + date.getMinutes() :
                            date.getMinutes()) + ":";
                    var s =
                        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    return Y + M + D + h + m + s;
                }
                return timetrans(info);
            }
        },
        methods: {
            onSearchAttendance(event) {
                //选择药师
                let me = this;
                let o = $(event.target);
                let options = o.find("option:selected");
                me.dzyname = options.text();
                me.zyzc = options.attr("data-zyzc");
                me.idcard = options.attr("data-idcard");
            },
            onInquiry(e) {
                //药师记录：查询
                let me = this;
                let res = {
                    beginDate: $("#j_startDate").val(),
                    endDate: $("#j_endDate").val(),
                    personName: $("#j_attendanceInquiry option:selected").text(),
                    personId: $("#j_attendanceInquiry option:selected").attr("data-idcard"),
                    fdbs: localStorage.getItem("fdbs")
                };
                me.service.selectYaoShiKQRecordList(me, res, data => {
                    me.mainBody = data.data;
                });
            },
            onDel(e) {
                //药师记录：删除
                let me = this;
                let {
                    pcid
                } = e.target.dataset;
                let res = {
                    pcId: pcid
                };
                let idx;
                me.service.deleteYaoShiKQRecord(me, res, data => {
                    layer.alert(data.message);
                    me.mainBody.forEach((item, index) => {
                        if (item.pc_id == pcid) {
                            idx = index;
                        }
                    });
                    Vue.delete(me.mainBody, idx);
                });
            },
            onAdd(e) {
                //药师记录：添加
                let me = this;
                let res = {
                    storeId: me.storeId,
                    personName: me.dzyname,
                    personId: me.idcard,
                    personTitles: me.zyzc,
                    checkType: me.radio,
                    fdbs: localStorage.getItem("fdbs")
                };
                me.service.addYaoShiKQRecord(me, res, data => {
                    let res = {
                        beginDate: $("#j_startDate").val(),
                        endDate: $("#j_endDate").val(),
                        personName: me.dzyname,
                        personId: me.idcard,
                        fdbs: localStorage.getItem("fdbs")
                    };
                    me.service.selectYaoShiKQRecordList(me, res, data => {
                        me.mainBody = data.data;
                    });
                });
            },
            onRevise(e) {
                //药师记录：修改
                let me = this;
                let {
                    pcid,
                    index
                } = e.target.dataset;
                let res = {
                    pcId: pcid,
                    newchecktime: $("#date" + index).val()
                };
                me.service.updateYaoShiKQRecord(me, res, data => {
                    layer.alert(data.message);
                });
            }
        },
        mounted() {
            let me = this;
            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                });
                return;
            }
            $(".start-date,.end-date").datetimepicker({
                language: "zh-CN",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: "yyyy-mm-dd"
            });
            let time = new Date();
            let startTimes =
                time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + "01"; //默认开始日期
            let endTimes =
                time.getFullYear() +
                "-" +
                (time.getMonth() + 1) +
                "-" +
                me.util.string.numFix(time.getDate()); //默认结束日期
            $("#j_startDate").val(startTimes);
            $("#j_endDate").val(endTimes);
            me.service.selectKQYaoShiList(me, data => {
                me.attendance = data.data;
            });
            me.service.selectKQShopList(me, data => {
                me.storeId = data.data.store_id;
            });
            me.onInquiry();
            drugH();
            $(window).resize(function() {
                drugH();
            });
        }
    };
</script>